<template>
	<view style="padding-top: 2%;padding-bottom: 2%;background-color: rgb(243,244,246);height: 100vh;">
		<u-card :title="orderDetail.user.wxName" :sub-title="orderDetail.mealTime + ' ' + orderDetail.mealType" :thumb="orderDetail.user.picture"
		 thumb-circle thumb-width="60" style="height: 100%;">
			<view slot="body" style="height: 60%;">
				<scroll-view :style="{'height':windowHeight}" scroll-y>
					<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0" style="margin-left: 5%;"
					 v-for="(item,index) in orderDetail.foods" :key="index">
						<u-lazy-load border-radius="20" :image="imgUrl + item.picture" style="width: 25%;height: 160rpx;" @click="previewImg(imgUrl + item.picture)"></u-lazy-load>
						<view class="u-body-item-title u-line-2" style="margin-left: 5%;width: 65%;">
							<view><text style="font-weight: bold;">{{item.name}}</text></view>
							<view style="text-align: right;">
								<u-tag v-if="item.extraMeal" text="加餐" mode="plain" style="margin-right: 70rpx;" />
								<text>✖{{item.num}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view slot="foot" style="padding-left: 10%;padding-right: 10%;">
				<u-row gutter="16">
					<u-col span="7">
						<u-icon name="order" size="40" :label="'共'+orderDetail.foodsCount+'道菜'"></u-icon>
					</u-col>
					<u-col span="5">
						<u-icon name="account" size="40" :label="orderDetail.num+'人就餐'"></u-icon>
					</u-col>
				</u-row>

				<u-row>
					<u-col span="7">
						<u-icon name="bookmark" size="40" :label="orderDetail.flavor.flavor"></u-icon>
					</u-col>
					<u-col span="5">
						<u-icon name="map" size="40" :label="orderDetail.place.place"></u-icon>
					</u-col>
				</u-row>

				<u-row gutter="16" v-if="orderDetail.remark !== null && orderDetail.remark !== ''">
					<u-col span="12">
						<u-icon name="chat" size="40" :label="orderDetail.remark"></u-icon>
					</u-col>
				</u-row>

				<u-row style="padding:5%">
					<u-col span="10" text-align="center" offset="1">
						<u-button type="primary" @click="addMealMethod" v-if="orderDetail.status !== 2">为此订单加菜</u-button>
					</u-col>
				</u-row>

				<u-row style="padding:5%">
					<u-col span="10" text-align="center" offset="1">
						<u-button type="primary" @click="notifyMeal" v-if="orderDetail.status==0  && notify">通知就餐</u-button>
						<u-button type="primary" v-if="orderDetail.status==1 && notify" @click="finishOrder">订单完成</u-button>
					</u-col>
				</u-row>

			</view>
		</u-card>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		queryOrderById,
		notifyMeal,
		orderFinish
	} from '@/api/common.js'
	export default {
		data() {
			return {
				orderId: null,
				orderDetail: null,
				notify: false,
				imgUrl: '',
				windowHeight:''
			}
		},
		onLoad(e) {
			let that = this
			this.orderId = e.id
			this.windowHeight = getApp().globalData.windowHeight * 0.45 +'px'
			queryOrderById(this.orderId).then(res => {
				that.orderDetail = res.data

				let array = res.data.foods.map(item => {
					return item.num
				})

				that.orderDetail.foodsCount = array.reduce((n, m) => {
					return n + m
				})

			}).catch(res => {
				console.log(res)
			})
		},
		created(e) {
			this.imgUrl = getApp().globalData.baseImgurl
			let user = getApp().globalData.user
			if (user === null || user === undefined) {
				return
			}
			this.notify = user.administer
		},
		methods: {
			notifyMeal() {
				let that = this

				notifyMeal(this.orderId).then(res => {
					this.$refs.uToast.show({
						title: '通知成功',
						type: 'success',
					})
					this.orderDetail.status = 1
				}).catch(res => {

				})
			},
			finishOrder() {
				orderFinish(this.orderId).then(res => {
					this.$refs.uToast.show({
						title: res.data,
						type: 'success',
					})
					this.orderDetail.status = 2
				}).catch(res => {
					this.$refs.uToast.show({
						title: res.message,
						type: 'danger',
					})

				})
			},
			addMealMethod() {

				getApp().globalData.addMealOrderDeatil = this.orderDetail

				uni.reLaunch({
					url: '/pages/menu/menu?addMeal=true'
				})

			}
		}
	}
</script>

<style>
	.card-left {
		width: 33.33%;
	}

	.card-right {
		margin-left: 3%;
		width: 63.66%;
	}

	.card {
		display: flex;
		padding: 5%;

	}

	.description {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
</style>
